Component({
  properties: {
    src: {
      type: String,
      observer(newVal, oldVal) {
        this.setData({ src: newVal });
      }
    },
    width: {
      type: String,
      value: ''
    },
    height: {
      type: String,
      value: ''
    }
  },
  data: {
    showImage: false,
    imageSrc: '',
    observe: null
  },
  ready: function () {
    // 在组件准备完毕后，设置 imageSrc 为图片的 URL
    this.setData({
      imageSrc: this.properties.src
    })
  },
  lifetimes: {
    attached: function () {
      // 在组件附加到页面节点树时，监听组件的可视状态
      this.data.observe = this.createIntersectionObserver().relativeToViewport()
      this.data.observe.observe(".lazy-image", (result) => {
        if (result.intersectionRatio > 0) {
          this.setData({ showImage: true })
        }
      });
    },
  },
  detached: function () {
    // 在组件从页面节点树移除时，取消监听组件的可视状态
    this.data.observe.disconnect()
  }
})